import { Tooltip, udp } from '@cscec/udp-ui';
import { CSSProperties } from 'react';
import { ReactSVG } from 'react-svg';
import styles from './index.less';
import React from 'react';

function hex2Rgba(bgColor: string, alpha = 1) {
  const color = bgColor.slice(1);
  const rgba = [
    parseInt(`0x${color.slice(0, 2)}`),
    parseInt(`0x${color.slice(2, 4)}`),
    parseInt(`0x${color.slice(4, 6)}`),
    alpha,
  ];
  return `rgba(${rgba})`;
}

function SvgIcon(props: { src: string; onClick?: (args: any) => void; style?: CSSProperties; className?: string }) {
  const {
    src, onClick, style, className = '',
  } = props;
  return (
    <ReactSVG
      className={`${styles.svgIcon} ${className}`}
      src={src}
      wrapper="span"
      onClick={onClick}
      style={{ ...style }}
    />
  );
}

function getCardBackground(color = '#4160FF') {
  if (color[0] !== '#') {
    color = '#4160FF';
  }
  return `linear-gradient(180deg, ${hex2Rgba(color)} 0%, ${hex2Rgba(color, 0.68)} 100%)`;
}
const backgroundColorList = [
  '#4160FF',
  '#FE5462',
  '#FE9600',
  '#28C680',
  '#1AA4FB',
  '#583327',
  '#6EC5FF',
  '#4B73FA',
  '#EE7C6A',
  '#7839FF',
];

export function HistoryMenuCard(props: any) {
  const {
    funcIcon,
    funcDesc,
    menuCode,
    menuUrl,
    menuName,
    moduleCode,
    routeName,
    funcName,
    env,
  } = props;

  const menuClick = ({ menuUrl, routeName, menuName }: any) => () => {
    if (env?.session !== 'render') {
      return;
    }
    udp.open(menuUrl, { microAppName: routeName || '', AppTitle: menuName });
  };

  return (
    <div
      className={styles.card}
      style={{ background: getCardBackground(backgroundColorList[funcIcon - 1] ?? backgroundColorList[0]) }}
      onClick={menuClick({ menuUrl, routeName, menuName: menuName || funcName })}
    >
      <div className={styles.left}>
        <SvgIcon src={`./svg/common-menu-icon/${funcIcon ?? 1}.svg`} />
      </div>
      <div className={styles.right}>
        <Tooltip title={menuName} overflow>
          <div className={styles.title}>{menuName}</div>
        </Tooltip>
        <Tooltip title={funcDesc} overflow>
          <div className={styles.desc}>{funcDesc}</div>
        </Tooltip>
      </div>
      <img className={styles.mask} src="./image/common-function-background-mask.png" />
    </div>
  );
}
